<template>
	<view class="mine-wallet-recharge-detail">
		<view class="extract-content">
			<u-empty v-if="isNotNull" mode="data" icon="/static/images/common/order.png" textSize="18" width="220"
				height="220"></u-empty>
			<block v-for="(res, index) in list" :key="index">
				<view class="line-style">
					<view class="line-content">
						<view class="title-date">
							<view class="line-title">充值方式: {{ res.line_title }}</view>
							<view class="line-date">{{ res.line_date }}</view>
						</view>
						<view :class="`${ res.extract_money > 0 ? 'line-reputation-one' : 'line-reputation-two' }`">
							{{ res.extract_money }}
						</view>
					</view>
					<view class="line-content-two">
						<view class="order-status">
							<view class="line-order" >{{ res.order }}</view>
							<view
								:class="`${ res.status_two === 1 ? 'line-status-three' : res.status_two === 2 ? 'line-status' : 'line-status-two'}`">
								{{ res.status }}</view>
						</view>
						<view class="line-remark" v-if="res.remark != ''">{{ '审核理由: &ensp;' + res.remark }}</view>
					</view>
				</view>
			</block>
			<u-loadmore v-if="list.length != 0" :status="loading.status" :loading-text="loading.loadingText" :loadmore-text="loading.loadmoreText"
				:nomore-text="loading.nomoreText" :icon="true" loadingIcon="circle" :line="true" marginTop="20"
				marginBottom="20" iconColor="#cecece" color="#cecece" @loadmore="lower" />
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		recharge_list
	} from '@/common/api.js';
	export default {
		data() {
			return {
				/* 加载更多 */
				loading: {
					status: 'loadmore', // 加载更多设置
					loadingText: '加载中',
					loadmoreText: '轻轻上拉加载更多',
					nomoreText: '暂时没有了',
				}, // 加载设置

				/* 充值明细 */
				pages: 1, // 页数
				total_page: '', // 总页数
				amount: 10, // 条数
				total_amount: '', // 订单总数
				list: [], // 账单列表
				isNotNull: false, // 订单不为空
			};
		},
		onLoad() {
			/* 获取充值明细 */
			this.getDetail(); // 获取充值列表
		},
		onShow() {

		},
		/* 加载更多 */
		onReachBottom() {
			this.lower();
		},
		methods: {

			/* 充值明细 */
			getDetail() {
				const that = this;
				const params = {
					page: that.pages,
					limit: that.amount
				};
				recharge_list(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.total_page = result.last_page;
						that.total_amount = result.total;
						// console.log(result);
						that.list = result.data.map(item => {
							return {
								id: item.id,
								line_title: item.type === 1 ? '银行卡' : item.type === 2 ? '支付宝' : '微信',
								line_date: item.createTime,
								extract_money: item.money,
								status: item.status === 1 ? '待审核' : item.status === 2 ? '审核通过' : '审核不通过',
								remark: item.checkRemark,
								order: item.orderNo,
								status_two: item.status
							};
						});
						if (that.list.length == 0) {
							this.loading.status = 'nomore';
							that.isNotNull = true;
						} else {
							that.isNotNull = false;
						}
						if (that.list.length == that.total_amount) {
							that.loading.status = 'nomore';
						};
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 加载下一页数据 */
			getMoreDetail() {
				const that = this;
				const params = {
					page: that.pages,
					limit: that.amount
				};
				recharge_list(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.total_page = result.last_page;
						let moreList = result.data.map(item => {
							return {
								id: item.id,
								line_title: item.type === 1 ? '银行卡' : item.type === 2 ? '支付宝' : '微信',
								line_date: item.createTime,
								extract_money: item.money,
								status: item.status === 1 ? '待审核' : item.status === 2 ? '审核通过' : '审核不通过',
								remark: item.checkRemark,
								order: item.orderNo
							};
						});
						for (let i = 0; i < moreList.length; i++) {
							that.list.push(moreList[i]);
						};
						if (that.pages <= that.total_page) {
							this.loading.status = 'loadmore';
						} else {
							setTimeout(() => {
								this.loading.status = 'nomore';
							}, 700);
						};
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 详情向下滚动 */
			lower(e) {
				const that = this;
				if (that.pages <= that.total_page && that.list.length != that.total_amount) {
					this.loading.status = 'loading';
					setTimeout(() => {
						that.pages = that.pages + 1;
						this.getMoreDetail();
					}, 700);
				} else {
					this.loading.status = 'nomore';
				};
			},
		}
	}
</script>

<style lang="scss">
	.mine-wallet-recharge-detail {
		padding: 10px 18px 20rpx 18px;

		.extract-content {
			box-sizing: border-box;
			// background-color: #FFFFFF;
			// border-radius: 10px;
			// padding: 16rpx 40rpx;
			// padding-top: 60rpx;


			.line-style {
				padding: 10rpx 30rpx;
				box-sizing: border-box;
				box-shadow: 0px 2px 5px #dedede;

				&:nth-of-type(1) {
					margin-top: 0;
				}

				&:nth-of-type(n+2) {
					margin-top: 38rpx;
				}

				.line-content {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 30rpx 5px 0 5px;

					.title-date {
						width: 64vw;

						.line-title {
							color: #000000;
							// color: #6B3C17;
							font-size: 34rpx;
							font-weight: 600;
						}

						.line-date {
							margin-top: 10px;
							color: #D6C9BF;
							font-size: 26rpx;
						}
					}

					.line-reputation-one {
						// color: #AD4440;
						color: #049C44;
						font-size: 36rpx;
						font-weight: 600;
					}

					.line-reputation-two {
						// color: #6B3C17;
						color: #AD4440;
						font-size: 36rpx;
						font-weight: 600;
					}
				}

				.line-content-two {
					margin: 40rpx 5px 30rpx 5px;

					.order-status {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.line-order {
							color: #847c76;
							font-size: 28rpx;
						}

						.line-status {
							color: #bf0000;
							font-size: 34rpx;
							font-weight: 600;
						}

						.line-status-two {
							color: #ff0000;
							font-size: 34rpx;
							font-weight: 600;
						}

						.line-status-three {
							color: #949494;
							font-size: 34rpx;
							font-weight: 600;
						}
					}

					.line-remark {
						margin-top: 20rpx;
						// font-weight: 600;
					}
				}
			}
		}
	}
</style>
